<template>
	<view>
		<view class="videobox" :style="[{'background-color':videoboxBackgroundColor}]">
			<view class="videolistS-v" :style="[{'width':videolistWidth}]">
				<view class="videolistS-v-item"
				v-for="(item,index) in  videolist" :key="index"
				>
					<view class="Imagebox">
						<!-- 封面 -->
						<image class="Image" 
						:src="item.image"
						mode="aspectFill"
						></image>
						<!-- 顶部VIP角标||收藏等 -->
						<view class="top" v-if="item.videotype===1">
							<text class="top-text">VIP</text>
						</view>
						<!-- 底部评分等 -->
						<view class="bottom">
							<text class="bottom-text">{{item.jishu}}</text>
						</view>
					</view>
					<view class="videotitle">
						<!-- 标题 -->
						<view class="title">
							<text class="title-text">{{item.title}}</text>
						</view>
						<!-- 摘要 -->
						<view class="desc">
							<text class="desc-text">{{item.desc}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			// 数据列表
			videolist:{
				type:Array,
				default:[]
			},
			// 外盒子背景色
			videoboxBackgroundColor:{
				type:String,
				default:'rgba(255, 255, 255, .0)'
			},
			// 内盒子宽度
			videolistWidth:{
				type:String,
				default:'690rpx'
			}
		},
		name:"FatFatMeng-videolistS-v",
		data() {
			return {
				//静态数据
				videolist: [
					{
						image:'https://m.ykimg.com/0584000060A759C92027EE090EB42DD8',
						title:'一不小心捡到爱',
						desc:'失忆霸总爱上我',//描述|摘要，如果有则显示，反正不显示
						jishu:'30集全',
						videotype:1,//0 不要VIP || 1 要VIP [是VIP则显示vip角标]
						categorytype:'电视剧'
					},
					{
						image:'https://puui.qpic.cn/vcover_vt_pic/0/mzc00200y4wycre1623742797529/350',
						title:'千古玦尘',
						desc:'周冬雨许凯三生亘古恋',//描述|摘要，如果有则显示，反正不显示
						jishu:'更新至14集',
						videotype:0,//0 不要VIP || 1 要VIP [是VIP则显示vip角标]
						categorytype:'电视剧'
					},
					{
						image:'https://puui.qpic.cn/vcover_vt_pic/0/qjr4mfe8xf85j0j1622169082720/350',
						title:'双世宠妃3',
						desc:'爆甜！坦诚夫妇三世独宠',//描述|摘要，如果有则显示，反正不显示
						jishu:'更新至30集',
						videotype:1,//0 不要VIP || 1 要VIP [是VIP则显示vip角标]
						categorytype:'电视剧'
					}
				],
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import './videolistS-v.scss';
</style>
